<template>
    <!--右键窗口-->
    <div class="menu">
        <ul class="menu-list">
            <li class="menu-item">
                <span>邀请加入游戏</span>
            </li>
                    
            <li class="menu-item">
                <span>发送信息</span>
            </li>
                    
            <li class="menu-item">
                <span>观战</span>
            </li>
                    
            <li class="menu-item">
                <span>查看生涯</span>
            </li>

            <li class="menu-item">
                <span>添加备注</span>
            </li>
                    
            <li class="menu-item">
                <span>移动</span>
            </li>
                    
            <li class="menu-item" @click="removeFriend">
                <span>解除好友关系</span>
            </li>
                    
            <li class="menu-item">
                <span>拉入聊天黑名单</span>
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    name: 'ContextMenu',
    props:['removeFriend'],
}
</script>

<style>
    .menu{
        position: absolute;

        height: 304px;
        width: 160px;

        background-color: rgba(9, 14, 20);
        border: 2px solid rgb(128, 110, 9);
        border-image: linear-gradient( rgb(80, 69, 7), rgb(99, 85, 8)) 20 20;
    }


    .menu-list{
        list-style: none;
        color: rgb(199, 188, 139);
        margin: 0;
        padding: 0;

        line-height: 38px;
    }

    .menu-item:hover{
        background-color: rgba(255, 251, 231, 0.1);
        color: rgb(241, 231, 189);
    }
    
    .menu-item span{
        padding-left: 20px;
        font-size: 15px;
    }
</style>